<template>
  <div>
    <grid-layout :layout.sync="layout" :col-num="12" :row-height="50" :is-draggable="true" :autoSize="true" :is-resizable="true" :is-mirrored="false" :vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true">

      <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i" style="background:#ccc">
        <div style="height:100%;width:100%;display:flex;align-items: center;
    justify-content: center;font-size:25px;color:#fff">分栏{{item.i}}</div>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout';
export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  data () {
    return {
      layout: [
        { "x": 0, "y": 0, "w": 6, "h": 2, "i": "0", 'minW': 1 },
        { "x": 6, "y": 0, "w": 6, "h": 4, "i": "1", 'minW': 1 },
        // { "x": 4, "y": 0, "w": 2, "h": 5, "i": "2" },
        // { "x": 6, "y": 0, "w": 2, "h": 3, "i": "3" },
        // { "x": 8, "y": 0, "w": 2, "h": 3, "i": "4" },
        // { "x": 10, "y": 0, "w": 2, "h": 3, "i": "5" },
        // { "x": 0, "y": 5, "w": 2, "h": 5, "i": "6" },
        // { "x": 2, "y": 5, "w": 2, "h": 5, "i": "7" },
        // { "x": 4, "y": 5, "w": 2, "h": 5, "i": "8" },
        // { "x": 6, "y": 3, "w": 2, "h": 4, "i": "9" },
        // { "x": 8, "y": 4, "w": 2, "h": 4, "i": "10" },
        // { "x": 10, "y": 4, "w": 2, "h": 4, "i": "11" },
        // { "x": 0, "y": 10, "w": 2, "h": 5, "i": "12" },
        // { "x": 2, "y": 10, "w": 2, "h": 5, "i": "13" },
        // { "x": 4, "y": 8, "w": 2, "h": 4, "i": "14" },
        // { "x": 6, "y": 8, "w": 2, "h": 4, "i": "15" },
        // { "x": 8, "y": 10, "w": 2, "h": 5, "i": "16" },
        // { "x": 10, "y": 4, "w": 2, "h": 2, "i": "17" },
        // { "x": 0, "y": 9, "w": 2, "h": 3, "i": "18" },
        // { "x": 2, "y": 6, "w": 2, "h": 2, "i": "19" }
      ]
    }
  },
  created () {
    this.layout = localStorage.layout ? JSON.parse(localStorage.layout) : [{ "x": 0, "y": 0, "w": 6, "h": 2, "i": "0", 'minW': 1 },
    { "x": 6, "y": 0, "w": 6, "h": 4, "i": "1", 'minW': 1 },]
  },
  watch: {
    // layout: {
    //   handler (val) {
    //     console.log('111')
    //   },
    //   deep: true
    // },
    layout: {
      handler: function (val) {
        // console.info('value changed ', val)
        localStorage.layout = JSON.stringify(val)
      },
      deep: true
    }
  }
}
</script>